<template>
  <div id="app">
    <div class="container">
      <!-- 顶部框模块 -->
      <div class="form-group">
        <div class="input-group">
          <my-header title="这是一个案例" color="blue"></my-header>
        </div>
      </div>

      <!-- 数据表格 -->
      <table class="table table-bordered table-hover mt-2">
        <thead>
          <tr>
            <th>编号</th>
            <th>资产名称</th>
            <th>价格</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <my-tbody :list="list">
          <template v-slot:id="scope"> {{ scope.id }}</template>

          <template v-slot:name="scope"> {{ scope.name1 }}</template>

          <template v-slot:price="scope"> {{ scope.price }}</template>

          <template v-slot:time="scope"> {{ scope.time }}</template>
          <template #operation>
            <button>删除</button>
            <button>编辑</button>
          </template>
        </my-tbody>
        <!--
        <tfoot >
          <tr>
            <td colspan="5" style="text-align: center">暂无数据</td>
          </tr>
        </tfoot>
            -->
      </table>

      <!-- 添加资产 -->
    </div>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyTbody from './components/MyTbody.vue'
export default {
  data () {
    return {
      name: '', // 名称
      price: 0, // 价格
      list: [
        { id: 100, name: '外套', price: 199, time: new Date('2010-08-12') },
        { id: 101, name: '裤子', price: 34, time: new Date('2013-09-01') },
        { id: 102, name: '鞋', price: 25.4, time: new Date('2018-11-22') },
        { id: 103, name: '头发', price: 19900, time: new Date('2020-12-12') }
      ]
    }
  },
  components: { MyTbody, MyHeader }
}
</script>

<style>
.red {
  color: red;
}
</style>
